
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title>统计表</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/charts/Chart.js"></script>
    <script  src="js/echarts/echarts-all.js"></script>

    <link href="/js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="/css/table.css" rel="stylesheet" type="text/css">

    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>

    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    <script type="text/javascript" src="/echart/china.js"></script>
</head>
<body style="background-color: #ecf0f5;font-family: 微软雅黑;color: #475059;min-width: 1000px;overflow: auto">
<div id="app">
<div class="from_main" >

    <div style="padding: 0 10px 0 10px ;border: 1px #ccc solid;background-color: #fff;">
        <div class="e_chart" id="areascontent">
            <div class="charts charts_last">
                <p class="charts_p">每日数据<span class="r_right"></span></p>
                <div style="float: left; width: 100%;">
                    <div style="height: 35%; border: 1px solid #e6e6e6; overflow: hidden;">
                        <div class="dashboard-stats">
                            <div class="dashboard-stats-item" style="background-color: #578ebe;">
                                <div class="stat-icon">
                                    <i class="fa fa-clock-o"></i>
                                </div>
                                <h2 class="m-top-none" v-model="Todaysum">{{Todaysum}}</h2>
                                <h5>今日新增公司数</h5>
                            </div>
                        </div>
                        <div class="dashboard-stats">
                            <div class="dashboard-stats-item" style="background-color: #e35b5a;">
                                <h2 class="m-top-none">{{TodaysumPosition}}</h2>
                                <h5>今日新增职位发布数</h5>
                                <div class="stat-icon">
                                    <i class="fa fa-clock-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="dashboard-stats">
                            <div class="dashboard-stats-item" style="background-color: #44b6ae;">
                                <h2 class="m-top-none">{{TodaysumApp}}</h2>
                                <h5>今日新增求职者数</h5>
                                <div class="stat-icon">
                                    <i class="fa fa-file-text-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="dashboard-stats">
                            <div class="dashboard-stats-item" style="background-color: #8775a7; margin-right: 0px;">
                                <h2 class="m-top-none">{{TodaysumPost}}</h2>
                                <h5>今日投递简历数</h5>
                                <div class="stat-icon">
                                    <i class="fa fa-file-text-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="dashboard-stats">
                            <div class="dashboard-stats-item" style="background-color: #4f5c65; margin-bottom: 0px;">
                                <h2 class="m-top-none">{{Monthsum}}</h2>
                                <h5>本月新增公司数</h5>
                                <div class="stat-icon">
                                    <i class="fa fa-file-text-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="dashboard-stats">
                            <div class="dashboard-stats-item" style="background-color: #14aae4; margin-bottom: 0px;">
                                <h2 class="m-top-none">{{MonthsumPosition}}</h2>
                                <h5>本月新增职位发布数</h5>
                                <div class="stat-icon">
                                    <i class="fa fa-file-text-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="dashboard-stats">
                            <div class="dashboard-stats-item" style="background-color: #949FB1; margin-bottom: 0px;">
                                <h2 class="m-top-none">{{MonthsumApp}}</h2>
                                <h5>本月新增求职者数</h5>
                                <div class="stat-icon">
                                    <i class="fa fa-file-text-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="dashboard-stats">
                            <div class="dashboard-stats-item" style="background-color: #f29503; margin-right: 0px; margin-bottom: 0px;">
                                <h2 class="m-top-none">{{MonthsumPost}}</h2>
                                <h5>本月投递简历数</h5>
                                <div class="stat-icon">
                                    <i class="fa fa-file-text-o"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div></div>
        <div class="e_chart">
            <div class="charts l_left">
                <p class="charts_p">新增公司数<span class="r_right"></span></p>
                <div id="main1" style="height:350px;width: 98%"></div>
            </div>
            <div class="charts l_left last_charts">
                <p class="charts_p">新增求职者数量<span class="r_right"></span></p>
                <div id="main2" style="height:350px;width: 98%"></div>
            </div>
            <div class="charts l_left">
                <p class="charts_p">公司行业领域<span class="r_right"></span></p>
                <div id="main3" style="height:350px;width: 98%"></div>
            </div>
            <div class="charts l_left last_charts">
                <p class="charts_p">投递热门公司 TOP 10<span class="r_right"></span></p>
                <div id="main4" style="height:350px;width: 98%"></div>
            </div>
            <div class="charts l_left">
                <p class="charts_p">工作领域<span class="r_right"></span></p>
                <div id="main5" style="height:350px;width: 98%"></div>
            </div>
            <div class="charts l_left last_charts">
                <p class="charts_p">投递热门职位 TOP 10<span class="r_right"></span></p>
                <div id="main6" style="height:350px;width: 98%"></div>
            </div>
                <div class="e_chart" >
                    <div class="charts charts_last">
                        <p class="charts_p">工作职位分布地图<span class="r_right"></span></p>
                        <div style="float: left; width: 100%;">
                            <div style="height: 60%; border: 1px solid #e6e6e6; overflow: hidden;">
                                <div class="panel-body">
                                    <p  id="china" style="height: 450px; width: 100%;"></p>
                                </div>
                            </div>
                        </div>
                    </div>
        <div class="clear"></div>
        </div>
    </div>
    </div>

</div>
</div>

</body>
<!--<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>-->
<!--<script src="js/echarts-all.js"></script>-->
<!--<script src="js/analysis.js"></script>-->

<script type="text/javascript" >
    $(document).ready(function() {
        var myChart = echarts.init(document.getElementById('china'));
        // $.get('/json/china.json',function(ret) {
        //         echarts.registerMap('chinaMap', ret);
        var Name = [];
        var nums = [];
        var datatemp = [];
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/company/china",    //请求发送到dataActiont处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    Name.push(result[i].job_add);
                    console.log("3")
                    nums.push(result[i].companysum);
                    var ob = {name: "", value: ""};
                    ob.name = result[i].job_add;
                    ob.value = result[i].companysum;
                    datatemp.push(ob);
                    console.log("2")
                }
                var option = {
                    visualMap: {
                        min: 0,
                        max: 12,
                        text: ['High', 'Low'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['pink', 'red']
                        }
                    },
                    geo: {
                        map: 'china',
                        roam: false,
                        zoom: 1,
                        label: {
                            normal: {
                                show: true,
                                fontSize: '10',
                                color: 'rgba(0,0,0,0.7)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis: {
                                areaColor: '#F3B329',
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },

                    series: [
                        {
                            name: '民事案件',
                            type: 'map',
                            mapType: 'china',
                            geoIndex: 0,
                            data: datatemp,
                            label: {
                                show: true
                            },
                        }

                    ]
                };
                myChart.setOption(option)
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    })


</script>


<script type="text/javascript">
    $(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var job_add=[];    //横坐标数组（实际用来盛放X轴坐标值）
        var companysum=[];    //纵坐标数组（实际用来盛放Y坐标值）
        $.ajax({
            type : "get",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/company/all",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(data) {
                $(data).each(function(i,e){
                    // console.log("2")
                    job_add.push(e.create_date);
                    // console.log("3")
                    companysum.push(e.companysum);
                });
                // console.log("1")
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({
                    //加载数据图表
                    // title: {
                    //     text: '用户年龄统计图'
                    // },
                    //
                    // legend: {
                    //     data: job_add
                    // },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type:'category',
                        data: job_add,
                        // axisLabel: {
                        //     interval: auto
                        // }
                    },
                    yAxis: {
                        type: 'value',
                        axis: {
                            interval: 0
                        }
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '新增数量',
                        type: 'line',
                        data: companysum
                    }]
                });

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });
</script>


<script type="text/javascript">
    $(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var date=[];    //横坐标数组（实际用来盛放X轴坐标值）
        var companysum=[];    //纵坐标数组（实际用来盛放Y坐标值）
        $.ajax({
            type : "get",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/app/all",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(data) {
                $(data).each(function(i,e){
                    // console.log("2")
                    date.push(e.create_date);
                    // console.log("3")
                    companysum.push(e.companysum);
                });
                // console.log("1")
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({
                    //加载数据图表
                    // title: {
                    //     text: '用户年龄统计图'
                    // },
                    //
                    // legend: {
                    //     data: job_add
                    // },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type:'category',
                        data: date,
                        // axisLabel: {
                        //     interval: auto
                        // }
                    },
                    yAxis: {
                        type: 'value',
                        axis: {
                            interval: 0
                        }
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '新增数量',
                        type: 'line',
                        data: companysum
                    }]
                });

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });
</script>

<!--公司行业领域 饼图-->
<script type="text/javascript">
    $(document).ready(function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main3'));
        // 指定图表的配置项和数据
        var names=[];
        var values=[];
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        $.ajax({
            type : "get",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/company/pie",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                // if (list) {
                //     for(var i=0;i<list.length;i++){
                //         values.push(list[i].companytype);
                //         names.push(list[i].company_type);
                //     }
                if (data) {
                    for(var i=0;i<data.length;i++){
                        var test={"value":data[i].companytype, "name":data[i].company_type};
                        values.push(test);
                    }

                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption(
                        {
                            // title: {
                            //     text: '公司行业领域',
                            //     x: 'center'
                            // },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: names
                            },
                            series: [
                                {
                                    name: '行业领域',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: values,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                    );
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax

    });//刷新方法结束

</script>

<!--top 10 投递热门公司 柱状图-->
<script type="text/javascript">
    $(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main4'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var company_name=[];    //横坐标数组（实际用来盛放X轴坐标值）
        var count=[];    //纵坐标数组（实际用来盛放Y坐标值）
        $.ajax({
            type : "get",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/company/top10",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(data) {
                $(data).each(function(i,e){
                    // console.log("2")
                    company_name.push(e.company_name);
                    // console.log("3")
                    count.push(e.count);
                });
                // console.log("1")
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({
                    // 加载数据图表
                    // title: {
                    //     text: '投递热门公司 TOP 10',
                    //     x: 'center'
                    // },
                    xAxis: {
                        data: company_name,
                        axisLabel: {
                            interval: 0
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axis: {
                            interval: 0
                        }
                    },
                    series: [{
                        // 根据名字对应到相应的投递数
                        name: '用户年龄',
                        type: 'bar',
                        data: count
                    }]
                });

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });
</script>

<!--工作领域 饼图-->
<script type="text/javascript">
    $(document).ready(function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main5'));
        // 指定图表的配置项和数据
        var names=[];
        var values=[];
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        $.ajax({
            type : "get",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/position/pie2",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                // if (list) {
                //     for(var i=0;i<list.length;i++){
                //         values.push(list[i].companytype);
                //         names.push(list[i].company_type);
                //     }
                if (data) {
                    for(var i=0;i<data.length;i++){
                        var test={"value":data[i].jobtype, "name":data[i].job_type};
                        values.push(test);
                    }

                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption(
                        {
                            // title: {
                            //     text: '工作领域',
                            //     x: 'center'
                            // },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: names
                            },
                            series: [
                                {
                                    name: '工作领域',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: values,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                    );
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax

    });//刷新方法结束

</script>

<!--top 10 投递热门职位 柱状图-->
<script type="text/javascript">
    $(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main6'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var job_type=[];    //横坐标数组（实际用来盛放X轴坐标值）
        var jobTypeSum=[];    //纵坐标数组（实际用来盛放Y坐标值）
        $.ajax({
            type : "get",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/position/top10",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(data) {
                $(data).each(function(i,e){
                    // console.log("2")
                    job_type.push(e.job_type);
                    // console.log("3")
                    jobTypeSum.push(e.jobTypeSum);
                });
                // console.log("1")
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({
                    // 加载数据图表
                    // title: {
                    //     text: '投递热门职位 TOP 10',
                    //     x: 'center'
                    // },
                    xAxis: {
                        data: job_type,
                        axisLabel: {
                            interval: 0
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axis: {
                            interval: 0
                        }
                    },
                    series: [{
                        // 根据名字对应到相应的投递数
                        name: '用户年龄',
                        type: 'bar',
                        data: jobTypeSum
                    }]
                });

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });
</script>


</html>

<script>
    new Vue({
        el:"#app",
        data:{
            company:{},
            applicant:{},
            Todaysum:"",
            Monthsum:"",
            TodaysumPosition:"",
            MonthsumPosition:"",
            TodaysumApp:"",
            MonthsumApp:"",
            TodaysumPost:"",
            MonthsumPost:"",
        },
        methods:{
        },

        mounted() {
            _this = this
            axios.get('/company/list')
                .then(function (response) {
                    _this.company = response.data
                    console.log(_this.company);
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/app/list')
                .then(function (response) {
                    _this.applicant = response.data
                    console.log(_this.applicant);
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/company/today')
                .then(function (response) {
                    _this.Todaysum = response.data
                    // console.log(_this.Todaysum);
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/company/month')
                .then(function (response) {
                    _this.Monthsum = response.data
                    // console.log(_this.Monthsum);
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/position/today')
                .then(function (response) {
                    _this.TodaysumPosition = response.data
                    // console.log(_this.TodaysumPosition);
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/position/month')
                .then(function (response) {
                    _this.MonthsumPosition = response.data
                    // console.log(_this.MonthsumPosition);
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/post/today')
                .then(function (response) {
                    _this.TodaysumPost = response.data
                    // console.log(_this.Todaysum);
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/post/month')
                .then(function (response) {
                    _this.MonthsumPost = response.data
                    // console.log(_this.Monthsum);
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/app/today')
                .then(function (response) {
                    _this.TodaysumApp = response.data
                    // console.log(_this.Todaysum);
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/app/month')
                .then(function (response) {
                    _this.MonthsumApp = response.data
                    // console.log(_this.Monthsum);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    })
</script>




